<%@page contentType="text/html; charset=UTF-8" %>
<%@include file="/WEB-INF/jsp/init.jsp"%>
<script>
    //定制字段
    jQuery(function ($) {
        $("#definedColumns a").click(function (e) {
            $(this).find(":checkbox").trigger("click");
            //防止下拉菜单消失
            e.stopPropagation();
        });
        $("#definedColumns :checkbox").click(function (e) {
            e.stopPropagation();
        });

        // 加载部门信息到下拉框
        $.ajax({
            url: '/dept/getAllDept',
            success(data) {
                // data: [{id:1, name: '开发部'},{id:2, name: '测试部'}]
                $(data).each(function () {
                    $("#create-deptId").append("<option value='" + this.id + "'>" + this.name + "</option>")
                });
            }
        });

        $("#saveBtn").click(function () {
            // 获取填写的表单数据
            let data = {
                deptId: $("#create-deptId").val(),
                loginAct: $("#create-loginAct").val(),
                name: $("#create-name").val(),
                loginPwd: $("#create-loginPwd").val(),
                email: $("#create-email").val(),
                expireTime: $("#create-expireTime").val(),
                lockStatus: $("#create-lockStatus").val(),
                allowIps: $("#create-allowIps").val()
            };

            $.ajax({
                url: '/user/save',
                type: 'post',
                data: data,
                success(data) {
                    if (data.success) {
                        alert("添加成功！");
                        $("#createUserModal").modal('hide');
                        // 清空表单数据
                        //$(":input[id^=create-]").val("");
                        // 重置表单
                        $("#addForm")[0].reset();
                    }
                }
            })
        });
    });
</script>

<!-- 创建用户的模态窗口 -->
<div class="modal fade" id="createUserModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 60%;">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">新增用户</h4>
            </div>
            <div class="modal-body">
                <form id="addForm" class="form-horizontal" role="form">
                    <div class="form-group">
                        <label for="create-loginAct" class="col-sm-2 control-label">
                            登录帐号<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="create-loginAct">
                        </div>
                        <label for="create-name" class="col-sm-2 control-label">用户姓名&nbsp;</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-loginPwd" class="col-sm-2 control-label">
                            登录密码<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="create-loginPwd">
                        </div>
                        <label for="create-confirmPwd" class="col-sm-2 control-label">
                            确认密码<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <input type="password" class="form-control" id="create-confirmPwd">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-email" class="col-sm-2 control-label">邮箱&nbsp;</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="create-email">
                        </div>
                        <label for="create-expireTime" class="col-sm-2 control-label">失效时间&nbsp;</label>
                        <div class="col-sm-4">
                            <input datetime type="text" class="form-control" id="create-expireTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-deptId" class="col-sm-2 control-label">
                            部门<span style="color:red;">*</span>
                        </label>
                        <div class="col-sm-4">
                            <select class="form-control" id="create-deptId">
                                <option></option>
                            </select>
                        </div>
                        <label for="create-lockStatus" class="col-sm-2 control-label">锁定状态&nbsp;</label>
                        <div class="col-sm-4">
                            <select class="form-control" id="create-lockStatus">
                                <option value="1">启用</option>
                                <option value="0">锁定</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create-allowIps" class="col-sm-2 control-label">允许访问的IP&nbsp;</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="create-allowIps" placeholder="多个用逗号隔开">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" data-dismiss="modal">关闭</button>
                <button class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<div class="page-header">
    <h3>用户列表</h3>
</div>

<div class="btn-toolbar" role="toolbar" style="margin-left: 0;margin-top:-10px;">
    <form class="form-inline" role="form">
        <div class="input-group searchItem">
            <div class="input-group-addon">用户姓名</div>
            <input class="form-control" type="text">
        </div>
        <div class="input-group searchItem">
            <div class="input-group-addon">部门名称</div>
            <input class="form-control" type="text">
        </div>
        <div class="input-group searchItem">
            <div class="input-group-addon">锁定状态</div>
            <select class="form-control">
                <option>启用</option>
                <option>锁定</option>
            </select>
        </div>
        <button type="submit" class="btn btn-default search">查询</button>
    </form>
</div>

<div class="btn-toolbar" role="toolbar" style="height: 50px;margin-top:20px;">
    <div class="btn-group">
        <button class="btn btn-primary" data-toggle="modal" data-target="#createUserModal">
            <span class="glyphicon glyphicon-plus"></span> 创建
        </button>
        <button class="btn btn-default" onclick="location.href='detail.html'">
            <span class="glyphicon glyphicon-edit"></span> 编辑
        </button>
        <button class="btn btn-danger">
            <span class="glyphicon glyphicon-minus"></span> 删除
        </button>
    </div>
    <div class="btn-group" style="left: 5px;">
        <button class="btn btn-default">设置显示字段</button>
        <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
        </button>
        <ul id="definedColumns" class="dropdown-menu" role="menu">
            <li><a href="javascript:;"><input type="checkbox"/> 登录帐号</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 用户姓名</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 部门名称</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 邮箱</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 失效时间</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 允许访问IP</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 锁定状态</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 创建者</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 创建时间</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 修改者</a></li>
            <li><a href="javascript:;"><input type="checkbox"/> 修改时间</a></li>
        </ul>
    </div>
</div>

<div>
    <table class="table table-hover table-striped">
        <thead>
        <tr style="background-color:#d9edf7">
            <th><input type="checkbox"/></th>
            <th>序号</th>
            <th>登录帐号</th>
            <th>用户姓名</th>
            <th>部门名称</th>
            <th>邮箱</th>
            <th>失效时间</th>
            <th>允许访问IP</th>
            <th>锁定状态</th>
            <th>创建者</th>
            <th>创建时间</th>
            <th>修改者</th>
            <th>修改时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td><input type="checkbox"/></td>
            <td>1</td>
            <td>zhangsan</td>
            <td>张三</td>
            <td>市场部</td>
            <td>zhangsan@163.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td>
                <a href="javascript:;" style="text-decoration: none;"
                   onclick="window.confirm('您确定要锁定该用户吗？');">启用</a>
            </td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        <tr>
            <td><input type="checkbox"/></td>
            <td>2</td>
            <td>lisi</td>
            <td>李四</td>
            <td>市场部</td>
            <td>lisi@163.com</td>
            <td>2017-02-14 10:10:10</td>
            <td>127.0.0.1,192.168.100.2</td>
            <td>
                <a href="javascript:;" style="text-decoration: none;"
                   onclick="confirm('您确定要启用该用户吗？');">锁定</a>
            </td>
            <td>admin</td>
            <td>2017-02-10 10:10:10</td>
            <td>admin</td>
            <td>2017-02-10 20:10:10</td>
        </tr>
        </tbody>
    </table>
</div>

<!--分页-->
<%@include file="/WEB-INF/jsp/inc/pager.jsp" %>